(async function () {
  let websiteConfiguration = {};
  await Promise.all([WebsiteConfigurationPromise]).then((arr) => {
    websiteConfiguration = arr[0];
  });
  // console.log(websiteConfiguration);

  const websiteSetupYear = new Date(
    websiteConfiguration.setUpTime,
  ).getFullYear();
  const nowYear = new Date().getFullYear().toString();
  class PageHeader extends HTMLElement {
    constructor() {
      super();

      this.navListDefaultHTML = `
        <li class="button">
          更多
        </li>
      `;
      this.navListHTML = `
        <li>
          <a class="button" href="/index.html">首页</a>
        </li>
        <li>
          <a class="button" href="/pages/sort.html">分类</a>
        </li>
        <li>
          <a class="button" href="/pages/tool.html">工具</a>
        </li>
        <li>
          <a class="button" href="/pages/other.html">其他</a>
        </li>
        <li>
          <a class="button" href="/pages/admin/admin.html" target="_blank">作者后台（旧）</a>
        </li>
        <li>
          <a class="button" href="/pages/admin-varlet/index.html" target="_blank">作者后台（新）</a>
        </li>
        <li>
          <a class="button" href="/pages/console/index.html" target="_blank">网站后台</a>
        </li>

        <!-- 注释先
        <li>
          <a class="button" href="/pages/search.html">搜索</a>
        </li>
        <li>
          <a class="button" href="/pages/about.html">关于</a>
        </li>
        -->
      `;

      // const that = this;
      // window.addEventListener("resize", () => {
      //   const ul = that.getElementsByTagName("ul")[0];
      //   if (window.innerWidth >= 640) {
      //     ul.innerHTML = that.navListHTML;
      //   } else {
      //     ul.innerHTML = that.navListDefaultHTML;
      //   }
      // });

      // let usingNavHTML = this.navListDefaultHTML;
      // if (window.innerWidth >= 640) {
      //   usingNavHTML = this.navListHTML;
      // }
      this.className = "page-header header";
      this.innerHTML = `
      <div class="flex-row flex-1 flex-items-center">
        <a class="button header-title" href="/index.html">
            ${websiteConfiguration.name}
        </a>
      </div>

      <div class="navbar">
        <nav>
          <ul class="flex-row flex-wrap flex-items-center">
            ${this.navListHTML}
          </ul>
        </nav>
      </div>
    `;
    }
  }

  class PageFooter extends HTMLElement {
    constructor() {
      super();
      this.className = "page-footer";
      this.innerHTML = `<hr/>`;

      const actionDiv = document.createElement("div");
      actionDiv.className =
        "flex flex-row flex-wrap flex-items-center flex-content-center";
      actionDiv.innerHTML = `
        <div class="flex flex-row flex-wrap" style="width: 50%;justify-content: center;">
          <!-- RSS -->
          <div
              class="flex flex-row flex-items-center"
              style="margin-right: 1em;cursor: pointer;"
          >
              <img
                  src="/images/rss.gif"
                  alt="RSS"
                  onclick="javascript:window.open('/rss')"
              >
          </div>

          <!-- 分享按钮 -->
          <div
              style="width: 1.2em;height: 1.2em;cursor: pointer;"
          >
              <img
                  src="/images/share.svg"
                  alt="share"
                  style="width: 100%;height: 100%;"
                  onclick="window.navigator.share({
                      title: document.title,
                      text: document.querySelector('meta[name=description]').getAttribute('content'),
                      url: window.location.href
                  })"
              />
          </div>
        </div>
      `;

      const setUpDiv = document.createElement("div");
      setUpDiv.className =
        "flex flex-row flex-wrap flex-items-center flex-content-center";
      if (websiteConfiguration.setUpTime) {
        const setUpDate = new Date(websiteConfiguration.setUpTime);
        if (new Date() - setUpDate <= 0) {
          console.log("建站时间错误");
          return;
        }
        function calculateTime() {
          const dateTime = new Date() - setUpDate;
          const dateSecond = dateTime / 1000;
          const dateMinute = dateSecond / 60;
          const dateHour = dateMinute / 60;
          const dateDay = dateHour / 24;

          const second = Math.floor(dateSecond % 60);
          const minute = Math.floor(dateMinute % 60);
          const hour = Math.floor(dateHour % 24);
          const day = Math.floor(dateDay);
          return {
            second,
            minute,
            hour,
            day,
          };
        }

        setUpDiv.innerHTML = `
          <span>
            建站
          </span>
          <span class="time" style="margin: 0 0.25em;color: #409eff;">
          </span>
          <span>
            天
          </span>
          <span class="time" style="margin: 0 0.25em;color: #409eff;">
          </span>
          <span>
            时
          </span>
          <span class="time" style="margin: 0 0.25em;color: #409eff;">
          </span>
          <span>
            分
          </span>
          <span class="time" style="margin: 0 0.25em;color: #409eff;">
          </span>
          <span>
            秒
          </span>
        `;
        setInterval(() => {
          const time = calculateTime();
          const timeElements = setUpDiv.getElementsByClassName("time");
          timeElements[0].textContent = time.day;
          timeElements[1].textContent = time.hour;
          timeElements[2].textContent = time.minute;
          timeElements[3].textContent = time.second;
        }, 1000);
      }

      const copyrightDiv = document.createElement("div");
      copyrightDiv.className =
        "flex flex-row flex-wrap flex-items-center flex-content-center";
      copyrightDiv.innerHTML = `
        <span>
          &copy; ${websiteSetupYear}-${nowYear} ${websiteConfiguration.copyright}
        </span>
        <span style="margin: 0 0.25em;">
          ·
        </span>
        <div>
          <span>
            Powered By
          </span>
          <a
            href="https://gitee.com/flown/cyue-share-open"
            target="_blank"
            style="color: #3273dc;"
          >
            cyue-share
          </a>
        </div>
      `;

      const 备案div = document.createElement("div");
      备案div.className =
        "flex flex-row flex-wrap flex-items-center flex-content-center";
      if (websiteConfiguration.ICP备案) {
        备案div.innerHTML += `
          <a
            class="link link-hover"
            href="https://beian.miit.gov.cn"
            target="_blank"
            style="margin-right: 1em;"
          >
            ${websiteConfiguration.ICP备案}
          </a>
        `;
      }
      if (websiteConfiguration.公网安备案) {
        备案div.innerHTML += `
          <div
            class="flex flex-row flex-items-center flex-content-center"
            style="margin-right: 1em;"
          >
              <img src="/images/备案图标.png" style="width: 1em;vertical-align: middle;border: none;box-shadow: none;">
              <a
                  class="link link-hover"
                  href="https://beian.mps.gov.cn/#/query/webSearch?code=${websiteConfiguration.公网安备案号}"
                  rel="noreferrer"
                  target="_blank"
              >
                ${websiteConfiguration.公网安备案}
              </a>
          </div>
        `;
      }
      if (websiteConfiguration.萌ICP备案号) {
        备案div.innerHTML += `
          <!-- 萌ICP -->
          <div class="flex flex-row flex-items-center">
              <img style="width:1em;height:1em;border:none;box-shadow: none;" src="/images/icp.gov.moe.png">
              <a
                  class="link link-hover"
                  href="https://icp.gov.moe/?keyword=${websiteConfiguration.萌ICP备案号}"
                  target="_blank"
              >
                萌ICP备${websiteConfiguration.萌ICP备案号}号
              </a>
          </div>
        `;
      }

      this.appendChild(actionDiv);
      this.appendChild(setUpDiv);
      this.appendChild(copyrightDiv);
      this.appendChild(备案div);
    }
  }

  class PageArticleArchive extends HTMLElement {
    constructor() {
      super();

      fetch("/api/article/archive/all/name")
        .then((response) => response.json())
        .then((result) => {
          const nameArray = result.data;
          // console.log(nameArray);

          let liStr = "";
          for (const name of nameArray) {
            liStr += `
              <li>
                <a href="/pages/archive.html?name=${name}">${name}</a>
              </li>
            `;
          }

          this.className = "panel";
          this.innerHTML = `
            <section class="">
                <!-- <img
                  width="100%"
                  height="160"
                  class="image"
                  src="https://tse3-mm.cn.bing.net/th/id/OIP-C.BM9Jr91yPDx2dgHQhyQHlAHaE2?rs=1&pid=ImgDetMain"
                > -->
                <h3>归档</h3>
                <ul class="box-aside-list">
                  ${liStr}
                </ul>
            </section>
          `;
        });
    }
  }

  customElements.define("page-header", PageHeader);
  customElements.define("page-footer", PageFooter);
  customElements.define("page-article-archive", PageArticleArchive);

  const navScript = document.createElement("script");
  navScript.src = "/js/nav.js";
  document.body.appendChild(navScript);
})();
